<template>
  <div ref="barRef" class="bar"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts"
import { nextTick, onMounted, ref } from "vue"

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})

const barRef = ref()
onMounted(() => {
  nextTick(() => {
    let myChart = echarts.init(barRef.value)
    const series = [
      {
        data: props.data.map((item: any) => Number(item.percent)),
        type: "bar",
        stack: "a",
        barWidth: "20%",
        itemStyle: {
          color: "#F7B500", // 默认颜色
        },
        emphasis: {
          itemStyle: {
            color: "#02ACF7", // 鼠标划过时的颜色
          },
        },
      },
    ]
    const stackInfo: any = {}
    for (let i = 0; i < series[0].data.length; ++i) {
      for (let j = 0; j < series.length; ++j) {
        const stackName = series[j].stack
        if (!stackName) {
          continue
        }
        if (!stackInfo[stackName]) {
          stackInfo[stackName] = {
            stackStart: [],
            stackEnd: [],
          }
        }
        const info = stackInfo[stackName]
        const data = series[j].data[i]
        if (data && data.toString() !== "-") {
          if (info.stackStart[i] == null) {
            info.stackStart[i] = j
          }
          info.stackEnd[i] = j
        }
      }
    }
    for (let i = 0; i < series.length; ++i) {
      const data = series[i].data as any
      const info = stackInfo[series[i].stack]
      for (let j = 0; j < series[i].data.length; ++j) {
        // const isStart = info.stackStart[j] === i;
        const isEnd = info.stackEnd[j] === i
        const topBorder = isEnd ? 20 : 0
        const bottomBorder = 0
        data[j] = {
          value: data[j],
          itemStyle: {
            borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder],
          },
        }
      }
    }
    const option = {
      grid: {
        left: "60",
        right: "60",
        top: "30",
        bottom: "30",
      },
      xAxis: {
        type: "category",
        data: props.data.map((item: any) => item.title),
        offset: 2,
        boundaryGap: false,
        axisLabel: {
          fontSize: 11,
          color: "#9FA9BD",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          fontSize: 11,
          color: "#9FA9BD",
          // inside: true, // 将标签移到内部
          margin: 30, // 标签与轴线的距离
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#EBECEC",
            type: "dashed",
          },
        },
      },
      series: series,
      colors: ["#02ACF7"],
      tooltip: {
        trigger: "axis",
        formatter: (params: any[]) => {
          let tooltipHtml = ""
          params.forEach((param) => {
            tooltipHtml += `${param.name}: ${param.value}%<br/>`
          })
          return tooltipHtml
        },
      },
    }

    option && myChart.setOption(option)
    window.addEventListener("resize", () => {
      myChart.resize()
    })
  })
})
</script>

<style lang="scss" scoped></style>
